<template>
  <div class="body">
    <div class="top">
      <i @click="fun()">&lt;</i>
      <p>理财产品</p>
      <b>...</b>
    </div>
    <div class="center">
      <div class="centop">
        <div class="cetobox">
          <img src="@/assets/money/img/rmcp.png" alt="" />
          <img src="@/assets/money/img/jxlc.png" alt="" />
          <img src="@/assets/money/img/scyx.png" alt="" />
          <img src="@/assets/money/img/jhlc.png" alt="" />
        </div>
        <div class="cetobox">
          <img src="@/assets/money/img/xjgl.png" alt="" />
          <img src="@/assets/money/img/gdqx.png" alt="" />
          <img src="@/assets/money/img/zqcp.png" alt="" />
          <img src="@/assets/money/img/zslc.png" alt="" />
        </div>
      </div>
      <div class="cenzh">
        <div class="zhl">
          <img src="@/assets/money/img/jxlc-big.png" alt="" />
        </div>
        <div class="zhr">
          <img src="@/assets/money/img/scyx-big.png" alt="" />
          <img src="@/assets/money/img/jxlc-qx.png" alt="" />
        </div>
      </div>
      <h4>
        <p>精选理财</p>
        <i>省心搭配，尽享财富生活</i>
      </h4>
      <div class="jijin">
        <img src="@/assets/money/img/jijin.png" alt="" />
        <img src="@/assets/money/img/jijin.png" alt="" />
        <img src="@/assets/money/img/jijin.png" alt="" />
      </div>
      <div class="banner">
        <img src="@/assets/money/img/banner.png" alt="" />
      </div>
      <h4 style="margin-bottom: 0.2rem">
        <p>猜你喜欢</p>
        <i>适合才是最好的</i>
      </h4>
      <div class="jijin-big">
           <img src="@/assets/money/img/jijin-big.png" alt="" />
           <img src="@/assets/money/img/jijin-big.png" alt="" />
           <img src="@/assets/money/img/jijin-big.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.body {
  width: 100%;
  .top {
    width: 100%;
    height: 0.6rem;
    background: #1369b6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    i {
      margin-left: 0.1rem;
      font-size: 0.2rem;
    }
    p {
      font-size: 0.2rem;
    }
    b {
      font-size: 0.2rem;
      margin-right: 0.1rem;
    }
  }
  .center {
    width: 100%;
    .centop {
      height: 1.9rem;
      margin-bottom: 0.1rem;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .cetobox {
        display: flex;
        justify-content: space-around;
        img {
          width: 0.8rem;
        }
      }
    }
    .cenzh {
      width: 100%;
      display: flex;
      margin-bottom: 0.1rem;
      .zhl {
        width: 50%;
        text-align: center;
        img {
          width: 1.65rem;
        }
      }
      .zhr {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        img {
          width: 1.74rem;
        }
      }
    }
    h4 {
      display: flex;
      p {
        margin-left: 0.1rem;
        font-weight: 700;
        margin-right: 0.2rem;
      }
      i {
        font-size: 0.12rem;
        color: #8d8d8d;
        margin-top: 0.06rem;
      }
    }
    .jijin {
      display: flex;
      justify-content: space-around;
      margin-top: 0.1rem;
      margin-bottom: 0.3rem;
      img {
        width: 120px;
      }
    }
    .banner {
      text-align: center;
      margin-bottom: 0.3rem;
      img {
        width: 3.44rem;
      }
    }
    .jijin-big {
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        width: 3.44rem;
        display: block;
      }
    }
  }
}
</style>